<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<head>
    <title>MUSICXML</title>

    <link rel="stylesheet" href="lib/bootstrap/css/bootstrap.css" type="text/css" />
    <script src="build/editor-library-min.js" type="text/javascript"></script>
    
    <script>
    $(document).ready(function() {
        var oGetVars = {};

        if (window.location.search.length > 1) {
          for (var aItKey, nKeyId = 0, aCouples = window.location.search.substr(1).split("&"); nKeyId < aCouples.length; nKeyId++) {
            aItKey = aCouples[nKeyId].split("=");
            oGetVars[decodeURIComponent(aItKey[0])] = aItKey.length > 1 ? decodeURIComponent(aItKey[1]) : "";
          }
        }

        var frame = $(".notation-editor-instance");
        
        // Create an instance of the editor with the Score and <div> element
        lol = new MusicNotation.Instance({
            $el: frame,
            editable:true,
            title: false,
            scrollable: true,
            demo: location.hash.replace('#', ''),
            scale: (oGetVars.zoom / 100) || 1,
            bpm: parseInt(oGetVars.bpm, 10) || 120
        });
    });
    </script>

    <style>
    html, body, .scene, .container, .canvas-frame, .canvas-wrapper {
        height:100%;
        overflow:hidden;
    }
    label {
        font-size:11px;
    }
    .form-control {
        font-size:12px;
        padding-left:5px;
        padding-right:0;
    }

    #acc {
        width: 100px;
        position: absolute;
        top: 0;
        left: 0;
        display: none;
        z-index: 2;
    }
    .canvas-wrapper {
        z-index:10;
        height:100%;
        padding-left:0;
        padding-right:0;
        -webkit-user-select: none;
        -moz-user-select: none;
        user-select: none;
    }
    .xs-control {
        width:50px;
    }
    .s-control {
        width:75px;
    }
    .m-control {
        width:80px;
    }

    .mm-control {
        width: 100px;
    }
    .l-control {
        width:120px;
    }

    .top-right
    {
      position: fixed;
      right: 0;
      top: 0;
      margin-left: -50px; /*half the width*/
      z-index:999;
      width:100px;
      margin-top:100px;

    }

    a{
        color: #fff;
    }

    .editor-ui {
        background-color:#103B5C;
        padding-bottom:5px;
        padding-top:5px;
        color: #fff;
    }

    kbd {
        display: inline-block;
        border: 1px solid #ccc;
        border-radius: 3px;
        padding: 0.1em 0.5em;
        margin: 0 0.2em;
        box-shadow: 0 1px 0px rgba(0, 0, 0, 0.2), 0 0 0 2px #ffffff inset;
        background-color: #f7f7f7;
    }

    </style>
</head>

<body>
    <div class="top-right" id="log"></div>
    <div class="notation-editor-instance container" style="margin: 0px auto;width: 100%;"></div>
    </div>
</body>

</html>
